import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import 'package:flutter_page_indicator/flutter_page_indicator.dart';
class ProductContentPageIndicator extends SwiperPlugin {
  ///color ,if set null , will be Theme.of(context).scaffoldBackgroundColor
  final Color color;

  ///color when active,if set null , will be Theme.of(context).primaryColor
  final Color activeColor;

  ////font size
  final double fontSize;

  ///font size when active
  final double activeFontSize;

  final Key key;

  const ProductContentPageIndicator(
      {this.color,
        this.fontSize: 20.0,
        this.key,
        this.activeColor,
        this.activeFontSize: 20.0});

  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    Color activeColor =Colors.red;
    Color color = Colors.white;

    if (Axis.vertical == config.scrollDirection) {
      return Container(
        decoration: BoxDecoration(
          color: Colors.black.withAlpha(150)
        ),
        child:  Column(
          key: key,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Text(
              "${config.activeIndex + 1}",
              style: TextStyle(color: activeColor, fontSize: activeFontSize),
            ),
            new Text(
              "|",
              style: TextStyle(color: color, fontSize: fontSize),
            ),
            new Text(
              "${config.itemCount}",
              style: TextStyle(color: color, fontSize: fontSize),
            )
          ],
        ),
      );
    } else {
      return Container(
        padding: EdgeInsets.only(top:5,bottom: 5,left: 15,right: 15),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.black.withAlpha(150)
        ),
        child: Row(
          key: key,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Text(
              "${config.activeIndex + 1}",
              style: TextStyle(color: activeColor, fontSize: activeFontSize),
            ),
            new Text(
              " | ${config.itemCount}",
              style: TextStyle(color: color, fontSize: fontSize),
            )
          ],
        ),
      );
    }
  }
}
